<!--
This Source Code Form is subject to the terms of the Mozilla Public
License, v. 2.0. If a copy of the MPL was not distributed with this
file, You can obtain one at http://mozilla.org/MPL/2.0/.

Copyright (c) 2023-present Kaleidos INC
-->

<ng-container *transloco="let t">
  <label
    [attr.for]="fieldService.id"
    aria-live="assertive"
    *ngIf="showStrengthErrors()"
    class="errors">
    <p class="help">
      <tui-svg
        class="warning"
        src="warning"></tui-svg>
      {{ t('auth.password.password_help') }}
    </p>
    <ul
      *ngIf="control"
      class="error-list"
      data-test="password-error-list">
      <li *ngIf="control.hasError('minLength')">
        {{
          t('auth.password.num_characters', {
            number: characters
          })
        }}
      </li>
      <li
        *ngIf="control.hasError('uppercase') && control.hasError('lowercase')">
        {{
          t('auth.password.validation_multiple', {
            characterType1: t('auth.password.character.uppercase'),
            characterType2: t('auth.password.character.lowercase')
          })
        }}
      </li>
      <li
        *ngIf="control.hasError('uppercase') && !control.hasError('lowercase')">
        {{
          t('auth.password.validation', {
            characterType: t('auth.password.character.uppercase')
          })
        }}
      </li>
      <li
        *ngIf="control.hasError('lowercase') && !control.hasError('uppercase')">
        {{
          t('auth.password.validation', {
            characterType: t('auth.password.character.lowercase')
          })
        }}
      </li>
      <li *ngIf="control.hasError('symbol') && control.hasError('number')">
        {{
          t('auth.password.validation_multiple', {
            characterType1: t('auth.password.character.symbol'),
            characterType2: t('auth.password.character.number')
          })
        }}
      </li>
      <li *ngIf="control.hasError('symbol') && !control.hasError('number')">
        {{
          t('auth.password.validation', {
            characterType: t('auth.password.character.symbol')
          })
        }}
      </li>
      <li *ngIf="!control.hasError('symbol') && control.hasError('number')">
        {{
          t('auth.password.validation', {
            characterType: t('auth.password.character.number')
          })
        }}
      </li>
    </ul>
  </label>
  <ng-container *rxLet="strength$; let strength">
    <p
      *ngIf="!showError"
      class="password-help">
      <ng-container [ngSwitch]="strength?.id">
        <ng-container *ngSwitchCase="2"
          >{{ t('auth.password.help_medium') }}
        </ng-container>
        <ng-container *ngSwitchCase="3"
          >{{ t('auth.password.help_strong') }}
        </ng-container>

        <ng-container *ngSwitchDefault>
          <span aria-hidden="true">{{
            t('auth.password.help_weak', { number: characters })
          }}</span>
        </ng-container>
      </ng-container>
    </p>

    <ng-container *ngIf="strength !== undefined">
      <div
        class="strength"
        [class]="'strength-' + strength.id"
        aria-live="polite">
        <div class="strength-bar">
          <div class="step weak"></div>
          <div class="step medium"></div>
          <div class="step strong"></div>
        </div>
        <p
          class="password-strength-text"
          data-test="password-strength-text">
          {{ t(strength.value) }}
        </p>
      </div>
    </ng-container>
  </ng-container>
</ng-container>
